<template>
  <div class="equipment-detail">
    <div class="container">
      <!-- 头部 -->
      <div class="header">
        <div class="logo">铁甲二手机</div>
        <div class="title">二手工程机械交易平台</div>
      </div>
      
      <!-- 主要内容区域 -->
      <div class="content">
        <!-- 图片区域 -->
        <div class="image-section">
          <div class="card">
            <el-image 
              class="device-image"
              :src="deviceInfo.imageUrl" 
              :alt="deviceInfo.title"
              fit="cover"
            >
              <template #error>
                <div class="image-slot">
                  <el-icon><Picture /></el-icon>
                </div>
              </template>
            </el-image>
            
            <div class="disclaimer">
              说明：合影设备仅代表设备真实存在，真实可售
            </div>
          </div>
        </div>
        
        <!-- 信息区域 -->
        <div class="info-section">
          <div class="card">
            <div class="device-title">{{ deviceInfo.year }}年{{ deviceInfo.brand }}牌{{ deviceInfo.typeName }}</div>
            <div class="device-id">(ID:{{ deviceInfo.orderId }})</div>
            
            <div class="price"><el-text style="font-size: 30px;">成交金额：</el-text>{{ deviceInfo.price }}¥</div>
            
            <h3>设备原厂参数</h3>
            <table class="specs-table">
              <tbody> 
              <tr>
                <td class="label">品牌</td>
                <td>{{ deviceInfo.brand }}</td>
             
                <td class="label">型号</td>
                <td>{{ deviceInfo.model }}</td>
              </tr>
              <tr>
                <td class="label">出厂年限</td>
                <td>{{ deviceInfo.year }}年</td>
              
                <td class="label">小时数</td>
                <td>{{ deviceInfo.hour }}</td>
              </tr>
              <tr>
                <td class="label">停放地</td>
                <td>{{ deviceInfo.location }}</td>
              
                <td class="label">更新时间</td>
                <td>{{ deviceInfo.updateTime }}</td>
              </tr>
              </tbody>
            </table>
            
           
          </div>
        </div>
      </div>
      <div class="status-section">
        <el-card class="status-card">
          <div class="status-content">
              <div class="status-text">设备功能：{{ deviceInfo.typeDesc }}</div>
              <div class="status-text">设备状态：{{ deviceInfo.description }}</div>
          </div>
        </el-card>
      </div>
      <XM v-if="isReady"></XM>
      <MK></MK>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios';
import { useRoute,useRouter } from 'vue-router';
//导入pinia
import { useCounterStore } from '@/stores/counter'
//导入XM组件
import XM from '@/components/shouye/XM.vue'
    const isReady = ref(false)
    const router = useRouter()
    const route = useRoute()
    // 设备信息数据
    const deviceInfo = ref({})
    const equipmentId = ref()

    
    onMounted(async() => {
      await getDeviceData();
    //   await getEquipmentImage();
 // 主组件逻辑完成后，允许子组件渲染
      isReady.value = true;
    })


    const getDeviceData =async () => {
        const id=route.params.id
      const {data:response} = await axios.get(`/advertisement/${id}`)
       deviceInfo.value = response.data.order
          // 获取设备ID
          equipmentId.value=response.data.order.equipmentId
          console.log('deviceInfo',equipmentId.value)
          //重新设置全局变量的值
          useCounterStore().equipmentId=equipmentId.value
          console.log('equipmentId',equipmentId.value)
    }
    // const getEquipmentImage =async () => {
    //   const {data:response} = await axios.get(`/advertisement/equipmentImage/${equipmentId.value}`)
    //       // 获取设备ID
    //         console.log('LList',response.data.data)       
    // }
   
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
.equipment-detail {
  background-color: #f5f7fa;
  color: #333;
  line-height: 1.6;
  min-height: 100vh;
  padding: 20px 0;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}
.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e4e7ed;
}
.header .logo {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}
.header .title {
  margin-left: 15px;
  font-size: 18px;
  color: #606266;
}
.content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.image-section {
  flex: 1;
  min-width: 300px;
}
.info-section {
  flex: 1;
  min-width: 300px;
}
.card {
    height: 400px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.price {
  font-size: 28px;
  font-weight: bold;
  color: #f56c6c;
  margin: 15px 0;
}
.contact-btn {
  width: 100%;
  height: 50px;
  font-size: 18px;
  margin-top: 20px;
}
.specs-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}
.specs-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #ebeef5;
}
.specs-table tr:last-child td {
  border-bottom: none;
}
.specs-table .label {
  width: 20%;
  color: #909399;
  font-weight: 300;
}
.device-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 6px;
}
.disclaimer {
  background-color: #f0f9ff;
  border-left: 4px solid #409eff;
  padding: 10px 35px;
  margin: 30px 0;
  font-size: 14px;
  color: #606266;
}
.device-id {
  color: #909399;
  font-size: 14px;
  margin-top: 5px;
}
.device-title {
  font-size: 22px;
  font-weight: bold;
  margin: 10px 0;
}
@media (max-width: 768px) {
  .content {
    flex-direction: column;
  }
  .image-section, .info-section {
    width: 100%;
  }
}
</style>